<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>理解插槽</title>
        <style>
            .counter {
                margin: 15px auto;
                border: 1px solid blue ;
                padding: 10px;
                width: 80vw;
            }
        </style>
    </head>
    <body>

        <div id="root">

            <!-- 在父组件中通过为子组件指定标签体来向子组件分发内容 -->
            <handle-counter @increase="handleIncrease">
                {{ count }}
            </handle-counter>

            <handle-counter>
                <b>{{ count }}</b>
            </handle-counter>

            <!-- 在父组件中使用子组件时未指定标签体，则会显示插槽的默认内容 -->
            <handle-counter></handle-counter>
        </div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script>
            const HandleCounter = {
                template: `<div class="counter">
                              counter: 
                              <!-- 通过 内置组件 slot 来声明插槽 -->
                              <slot>
                                默认内容
                              </slot>
                              <br>
                              <button @click="increase">增加</button>
                           </div>`,
                methods: {
                    increase(){
                        console.log( '触发自定义事件(increase)' );
                        this.$emit( 'increase' );
                    }
                }                        
            }
            const options = {
                data(){
                    return { count: 1000 }
                },
                components: {
                    'handle-counter': HandleCounter
                },
                methods: {
                    handleIncrease(){
                        this.count++ ;
                    }
                }
            }

            Vue.createApp(options).mount('#root');
        </script>
        
    </body>
</html>